<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标事件</title>
<style type="text/css">
	*{margin:0;padding:0;list-style: none;}
	.all{margin:20px auto;width:300px;border:1px solid #000; background:#eee;}
	ul{height:30px;line-height:30px;}
	.head{font-weight: bold;}
	li{text-align:center;float: left;width: 75px;}
	.highLight{background-color:#FDFDC0;}
</style>
<script type="text/javascript">
	/*
	 obj参数接收调用方法时传入的'this'，'this'表示调用该方法的元素对象
	 setAttribute用来为元素对象设置属性
	 setAttribute第一个参数是属性名，第二个参数是属性值
	 在调用对象方法时，通过对象名+“.”+方法名完成
	 */
	function heighLine(obj){
		obj.setAttribute('class', 'highLight');
	}
	function rmHeighLine(obj){
	    /* 
		 removeAttribute用来删除元素对象的属性
		 removeAttribute的参数表示要删除的属性名 
		 */ 
		obj.removeAttribute('class');
	}
	function showName(obj){
		/* 
		 innerHTML是元素对象的一个属性，用于保存该元素对象的文本内容
		 获取对象属性值，通过对象名+“.”+属性名来完成 
		 */ 
		alert(obj. innerHTML);
	}
</script>
</head>
<body>
	<div class="all">
		<ul class="head">
            <li>姓名</li>
            <li>年龄</li>
            <li>性别</li>
            <li>国籍</li>
        </ul>
		<ul onmouseover="heighLine(this)" onmouseout="rmHeighLine(this)">
            <li onclick="showName(this)" style="cursor:pointer;">Agnesi</li>
            <li>21</li>
            <li>女</li>
            <li>英国</li>
        </ul>
		<ul onmouseover="heighLine(this)" onmouseout="rmHeighLine(this)">
            <li onclick="showName(this)" style="cursor:pointer;">Eastman</li>
            <li>17</li>
            <li>女</li>
            <li>法国</li>
        </ul>
		<ul onmouseover="heighLine(this)" onmouseout="rmHeighLine(this)">
            <li onclick="showName(this)" style="cursor:pointer;">Mack</li>
            <li>26</li>
            <li>男</li>
            <li>美国</li>
        </ul>
	</div>
</body>
</html>
